import { RadioDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Radio);

## Usage

<Demo data={RadioDemos.configurator} />

## Controlled

```tsx
import { useState } from 'react';
import { Radio } from '@mantine/core';

function Demo() {
  const [checked, setChecked] = useState(false);
  return (
    <Radio
      checked={checked}
      onChange={(event) => setChecked(event.currentTarget.checked)}
    />
  );
}
```

## States

<Demo data={RadioDemos.states} />

## Change icon

<Demo data={RadioDemos.icon} />

## Change icon color

<Demo data={RadioDemos.iconColor} />

## Disabled state

<Demo data={RadioDemos.disabled} />

## Pointer cursor

By default, radio input and label have `cursor: default` (same as native `input[type="radio"]`).
To change cursor to pointer, set `cursorType` on [theme](/theming/theme-object/):

```tsx
import { createTheme, MantineProvider, Radio } from '@mantine/core';

const theme = createTheme({
  cursorType: 'pointer',
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Radio label="Pointer cursor" />
    </MantineProvider>
  );
}
```

## Radio with tooltip

You can change target element to which tooltip is attached with `refProp`:

- If `refProp` is not set, the tooltip is attached to the checkbox input
- If `refProp="rootRef"` is set, the tooltip is attached to the root element (contains label, input and other elements)

<Demo data={RadioDemos.tooltip} />

<WrapperProps component="Radio" />

## Radio.Group component

<Demo data={RadioDemos.groupConfigurator} />

## Radio.Group disabled state

<Demo data={RadioDemos.groupDisabled} />

## Controlled Radio.Group

```tsx
import { useState } from 'react';
import { Radio } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState('react');

  return (
    <Radio.Group
      value={value}
      onChange={setValue}
      name="favoriteFramework"
      label="Select your favorite framework/library"
      description="This is anonymous"
      withAsterisk
    >
      <Radio value="react" label="React" />
      <Radio value="svelte" label="Svelte" />
      <Radio value="ng" label="Angular" />
      <Radio value="vue" label="Vue" />
    </Radio.Group>
  );
}
```

## Radio.Indicator

`Radio.Indicator` looks exactly the same as `Radio` component, but it does not
have any semantic meaning, it's just a visual representation of radio state. You
can use it in any place where you need to display radio state without any interaction
related to the indicator. For example, it is useful in cards based on buttons, trees, etc.

Note that `Radio.Indicator` cannot be focused or selected with keyboard. It is not
accessible and should not be used as a replacement for `Radio` component.

<Demo data={RadioDemos.indicator} />

## Radio.Card component

`Radio.Card` component can be used as a replacement for `Radio` to build custom
cards/buttons/other things that work as radios. The root element of the component
has `role="radio"` attribute, it is accessible by default and supports the same
keyboard interactions as `input[type="radio"]`.

<Demo data={RadioDemos.card} />

You can use `Radio.Card` with `Radio.Group` the same way as `Radio` component:

<Demo data={RadioDemos.cardGroup} />

<GetElementRef component="Radio" refType="input" />

<StylesApiSelectors component="Radio" />

<Demo data={RadioDemos.stylesApi} />

## Accessibility

Set `aria-label` or `label` prop to make the radio accessible:

```tsx
import { Radio } from '@mantine/core';

// Not ok, input is not labeled
function Bad() {
  return <Radio />;
}

// Ok, input is labelled by aria-label
function GoodAriaLabel() {
  return <Radio aria-label="My radio" />;
}

// Ok, input is labelled by label element
function GoodLabel() {
  return <Radio label="My radio" />;
}
```
